<template>
	<view>
		<view class="typebox">
			<view class="titlebox">问题类型</view>
			<view class="selecttype">
				<view class="typelist" v-for="(item,index) in typelist" :key="index">
					<image src="../../static/yuan.png"></image>
					<view>{{item}}</view>
				</view>
			</view>
		</view>
		<view class="infobox">
			<view class="tit">
				问题或建议
			</view>
			<textarea maxlength="100" placeholder="请描述您的问题/建议，如果有系统截图，请添加图片，我们将会尽快优化体验，感谢您的反馈"></textarea>
		</view>
		<view class="infobox">
			<view class="tit">
				添加图片<text style="color: #555555;font-size: 26rpx;">(选填)</text>
			</view>
			<view class="uploadbox">
				<image src="../../static/xj.png"></image>
				<view>点击添加</view>
			</view>
			<view class="imgbox">
				<view class="imgitem" v-for="(item,index) in 5" :key="index">
					<!-- <image src="../../static/logo.png"></image> -->
				</view>
				<view class="imgitem">
					<view class="addimg">
						<image src="../../static/xj.png"></image>
						<view>点击添加</view>
					</view>
				</view>
			</view>
		</view>
		<view class="infobox">
			<view class="tit">
				联系方式<text style="color: #555555;font-size: 26rpx;">(选填)</text>
			</view>
			<input placeholder="请留下您的手机号" type="number" />
		</view>
		<view style="height: 150rpx;"></view>
		<view class="navbut">
			<view>提交</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typelist:['功能异常','优化建议']
			}
		},
		methods: {
		}
	}
</script>

<style lang="scss" scoped>
	.typebox{
		width: 690rpx;
		padding: 0 30rpx;
		height: 198rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 20rpx;
		.titlebox{
			font-size: 36rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #222222;
			height: 116rpx;
			line-height: 116rpx;
		}
		.selecttype{
			display: flex;
			// align-items: center;
			height: 82rpx;
			.typelist{
				display: flex;
				// align-items: center;
				font-size: 32rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #222222;
				width: 40%;
				image{
					width: 36rpx;
					height: 36rpx;
					margin-right: 12rpx;
				}
			}
		}
	}
	.infobox{
		width: 690rpx;
		padding: 0 30rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 20rpx;
		.tit{
			height: 112rpx;
			border-bottom: solid 2rpx #F1F1F1;
			font-size: 32rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #222222;
			line-height: 112rpx;
		}
		>textarea{
			width: 690rpx;
			padding: 36rpx 0;
			height: 160rpx;
		}
		>input{
			width: 690rpx;
			padding: 36rpx 0;
		}
		.uploadbox{
			height: 212rpx;
			font-size: 28rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #888888;
			text-align: center;
			image{
				width: 66rpx;
				height: 60rpx;
				margin: 44rpx 0 28rpx 0;
			}
		}
		.imgbox{
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			.imgitem{
				width: 33.3%;
				text-align: center;
				image{
					width: 210rpx;
					height: 210rpx;
					margin-top: 10rpx;
				}
				.addimg{
					border: solid 2rpx #F1F1F1;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #888888;
					text-align: center;
					width: 208rpx;
					height: 208rpx;
					margin: 10rpx auto 0 auto;
					text-align: center;
					image{
						width: 66rpx;
						height: 60rpx;
						margin: 40rpx 0 25rpx 0;
					}
				}
			}
			
		}
	}
	.navbut{
		width: 750rpx;
		height: 120rpx;
		background-color: #F7F7F7;
		position: fixed;
		bottom:0;
		>view{
			width: 690rpx;
			height: 96rpx;
			background: #FF8A9B;
			border-radius: 83rpx;
			font-size: 36rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
			line-height:96rpx;
			margin: 10rpx auto;
		}
	}

</style>
